<template>
  <button :class="['app-button', `variant-${variant}`, { disabled }]" :disabled="disabled" @click="handleClick">
    <slot v-if="loading === false" />
    <UIcon v-else name="i-heroicons-arrow-path" class="animate-spin" />
    按钮
  </button>
</template>

<script setup lang="ts">
// 类型定义
interface Props {
  variant?: "primary" | "secondary" | "outline";
  disabled?: boolean;
  loading?: boolean;
}

// 使用 defineProps 接收外部参数
const props = withDefaults(defineProps<Props>(), {
  variant: "primary",
  disabled: false,
  loading: false,
});

// 事件声明
const emit = defineEmits<{
  (e: "click", payload?: any): void;
}>();

// 事件处理
const handleClick = (e: MouseEvent) => {
  if (props.disabled || props.loading) return;
  emit("click", e);
};
</script>

<style scoped>
.app-button {
  @apply px-4 py-2 rounded-md transition-all;
}
.variant-primary {
  @apply bg-blue-500 text-white hover:bg-blue-600;
}
.disabled {
  @apply opacity-50 cursor-not-allowed;
}
</style>
